<template>
	<img src="@/assets/images/banner1.png" style="height: 260px;object-fit: contain;" alt="">
	<div class="page_content df">
		<div class="course_left" v-loading="listname.length === 0">
			<div class="course_item" :class="{ active: option.value == item.value }" :key="item.id"
				v-for="(item, index) in listname" @click="courseItemChange(item)">
				{{ item.name }}
			</div>
		</div>
		<template v-if="courselist.length > 0">
			<el-scrollbar height="700px" style="width: 100%;" v-if="option.value == 3">
				<div class="course_right" v-infinite-scroll="LoadMore" :infinite-scroll-immediate="false">
					<el-collapse v-model="activeNames">
						<el-collapse-item :title=dl.title :name="index" v-for="(dl, index) in courselist" :key="dl.id"
							style="--el-collapse-header-font-size:18px">
							<div class="course_item1 df" v-for="(item, index) in dl.items" :key="index" @click="go(dl, item)">
								<div class="image">
									<el-image style="width: 100%; height: 100%; border-radius: 10px" :src="item.cover" fit="cover" />
								</div>
								<div class="item_box">
									<div class="row-bg row2">
										{{ item.title }}
									</div>
									<div class="row-bgs df ac">
										<div class="compulsory">{{ item.description }}</div>
										<div class="timer">时长：{{ convertSecondsToHMS(item.times) }}</div>
									</div>
								</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</el-scrollbar>
			<el-scrollbar height="700px" style="width: 100%;" v-else>
				<div class="course_right" style="border:1px solid #DFE1E3">
					<div v-infinite-scroll="LoadMore" class="infinite-list" :infinite-scroll-immediate="false">
						<div class="course_item1 df" v-for="(item, index) in courselist" :key="index" @click="go(item)">
							<div class="image">
								<el-image style="width: 100%; height: 100%; border-radius: 10px" :src="item.cover" fit="cover" />
							</div>
							<div class="item_box">
								<div class="row-bg row2">
									{{ item.title }}
								</div>
								<div class="row-bgs df ac">
									<div class="compulsory">{{ item.description }}</div>
									<div class="timer">时长：{{ convertSecondsToHMS(item.totalTimes) }}</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</el-scrollbar>
		</template>
		<template v-else>
			<xy-empty></xy-empty>
		</template>
		<!-- <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
			<li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
		</ul> -->


		<!-- <xy-course-item></xy-course-item> -->
	</div>
</template>

<script setup lang="ts">
import api from '@/api/api';
import { convertSecondsToHMS } from '@/utils/utils';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const route = useRoute()
//组件命名-----
defineOptions({ name: "course-index" })
// 课程分类
const listname = ref<any>([])
const option = ref<any>({ value: route.query.courseType })
// const option = ref<any>({})
onMounted(async () => {
	await fincation()
	await handleChange()
})
const fincation = async () => {
	const res = await api.GetClassfincation_API()
	if (res.code == 0) {
		listname.value = res.data
		// option.value = res.data[0]
		// option.value.value = Number(route.query.courseType)
		console.log("🚀 ~ fincation ~ option.value.value:", option.value.value)
	}
}


// 课程切换
const courseItemChange = (item: any) => {
	option.value = item
	//重置分页
	pagelist.page = 1
	courselist.value = []
	handleChange()
}
const activeNames = ref(0)
// 课程列表
const courselist = ref<any>([])
const pagelist = reactive({
	hasMore: true,//是否有更多数据
	page: 1,//当前页
	limit: 20,//每页显示多少条数据
	total: 0,//总数
	// items:[]
})
// 根据类别查询列表-分页
const handleChange = async () => {
	const res = await api.GetCategofyPage_API({ courseType: option.value.value, page: pagelist.page, limit: pagelist.limit })
	if (res.code === 0) {
		courselist.value.push(...res.data.data)
		pagelist.total = res.data.total
		pagelist.hasMore = res.data.hasMore
	}
}

// 课程小节
// const detaillist = ref<any>([])
// const handleChanges = async (e) => {
// 	console.log("🚀 ~ handleChanges ~ index:", e.id)
// 	const { data: res } = await api.Getdetail_API({ id: e.id })
// 	detaillist.value = res.items
// 	console.log("🚀 ~ handleChangess ~  res:", detaillist.value)
// }

const router = useRouter()
const go = (row?: any, dl?: any) => {
	router.push({
		path: 'videoc',
		query: {
			courseId: row?.id,
			id: dl?.id,
			courseType: row.courseType
		}
	})
}

const LoadMore = () => {
	console.log('是否有更多', pagelist.hasMore);
	//判断是否有更多
	if (pagelist.hasMore) {
		pagelist.page++
		handleChange()
	}

}


</script>

<style lang="scss" scoped>
.page_content {
	padding: 30px 0;
}

.course_left {
	width: 280px;

	.course_item {
		width: 100%;
		height: 70px;
		border-left: 1px solid $dcolor;
		border-right: 1px solid $dcolor;
		border-top: 1px solid $dcolor;
		text-align: center;
		line-height: 70px;
		cursor: pointer;

		&:last-child {
			border-bottom: 1px solid $dcolor;
		}
	}

	.active {
		color: $bcolor;
		position: relative;

		&::before {
			content: '';
			width: 3px;
			height: 35px;
			background: $bcolor;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
	}
}

.course_right {
	margin-left: 20px;
	flex: 1;

	.course_item1 {
		margin: 0 20px;
		padding: 30px 0;
		border-bottom: 1px solid $dcolor;
		cursor: pointer;

		&:last-child {
			border-bottom: none;
		}

		.image {
			width: 240px;
			height: 100%;
			height: 135px;
		}

		.item_box {
			flex: 1;
			margin-left: 20px;

			.row-bg {
				font-size: 20px;
				margin-bottom: 20px;
			}

			.compulsory {
				background-color: $bcolor;
				font-size: 14px;
				// width: 55px;
				padding: 0 6px;
				height: 26px;
				line-height: 26px;
				text-align: center;
				color: $white;
				border-radius: 3px;
				margin-right: 20px;
			}
		}

		.timer {
			color: $color1;
			font-size: 16px;
		}
	}
}

:deep(.el-collapse-item__header) {
	padding: 0 20px;
	border-left: 1px solid $dcolor;
	border-right: 1px solid $dcolor;
	// border-top: none;
	// border: 1px solid $dcolor;
}

:deep(.el-collapse-item__wrap) {
	border: 1px solid $dcolor;
}

:deep(.el-collapse-item__content) {
	padding-bottom: 0;
}


.infinite-list {
	// height: 800px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.infinite-list .infinite-list-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	background: var(--el-color-primary-light-9);
	margin: 10px;
	color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
	margin-top: 10px;
}


</style>
